<template>
	<view>
		<view class="page">
			<view class="area-header">
				<u-text text="合包后信息">
				</u-text>
			</view>
			<view class="list-content">
				<!-- 列表 -->
				<u-list class="list" v-if="scannedList && scannedList.length > 0" :height="ListViewHeight">
					<u-list-item v-for="(item, index) in scannedList" :key="item.id">
						<view class="card">
							<view class="right">
								<view class="title" style="word-break: break-all;">
									外部编号: {{item.extenalCode}}
									<button class="uni-btn" size="mini" plain type="primary"
										@click="scannedDelete(item, index)">打印</button>
								</view>
								<view class="body">
									物料:{{ item.materialCode }}({{ item.materialName }})
								</view>
								<view class="body">
									<label class="span">仓库号:{{ item?.warehouseCode || '待定'}}</label>
									<label class="span">存储类型:{{item?.storageTypeName || '待定'}}</label>
								</view>
								<view class="body">
									<label class="span">批次: {{item?.stockBatch || '待定'}}</label>
									<label class="span">数量: {{item?.totalQuantity || '待定'}}</label>
								</view>
								<view class="body">
									<label class="span">货位: {{item?.binCode || '待定'}}</label>
								</view>
							</view>
							<view class="left" v-if="item.isCheck === 1">
								<u-icon name="checkmark-circle-fill" color="#42b20e" size="26px"></u-icon>
							</view>
						</view>
						<u-line></u-line>
					</u-list-item>
				</u-list>
				<!-- 空数据 -->
				<view v-else>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</view>
			</view>
			<u-line></u-line>
			<view class="search">
				<u-button type="primary" @click="confirmReceiveData" class="custom-style"
					:loading="posting">返回首页</u-button>
			</view>
		</view>
		<!-- 动态创建webview -->
		<!-- <web-view v-if="showWebView" :src="webviewSrc" :update-title="false" allow="*"
			style="width: 0;height: 0"></web-view> -->
			<web-view
				ref="webview"
				v-if="showWebView"
				:src="webviewSrc"
				:update-title="false"
				:webview-styles="{
					width: '0px',
					height:'0px',
				}"
				style="height:0px;width:0px;background-color: aquamarine;"
				@message="message"
			></web-view>
		<u-modal :show="showImport" ref="uModal" :content="`当前外部编号为${selectOrder?.extenalCode ?? ''}, 请确认是否打印？`"
			confirmText="确认" showCancelButton :asyncClose="true" @cancel="cancelImport" @confirm="confirmImport(selectOrder.id)"
			style="word-break: break-all;"></u-modal>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref,watch } from 'vue';
	import { http } from "../../../utils/http";
	import { useUserStore } from '../../../stores/useUserStore';

	const ListViewHeight = ref(0);
	const posting = ref(false);
	// 选择订单
	const selectOrder = ref({});
	const selectIndex = ref();
	const showImport = ref(false);
	function scannedDelete(item : any, index : number) {
		showWebView.value = true;
		const defaultPrinter = computed(() => (useUserStore().defaultPrinter ? JSON.parse(useUserStore().defaultPrinter) : ''));
		console.log("111",defaultPrinter.value.printerName);
		if (defaultPrinter.value.length==0)
		{
		uni.showToast({
			title: '请选择打印设备',
			icon: 'error'
		});
		return false;
		}
		else
		{
		console.log(item)
		showImport.value = true;
		selectOrder.value = item;
		selectIndex.value = index;
		}
	}
	// 取消选择订单
	function cancelImport() {
		showImport.value = false;
		selectOrder.value = {};
		selectIndex.value = null;
	}

	const url = process.env.VITE_APP_WEBVIEW;
	const showWebView = ref(false);
	const webviewSrc = ref('');
	// 确定打印
	function confirmImport(id) {
		const defaultPrinter = computed(() => JSON.parse(useUserStore().defaultPrinter));
		const loginWorkInfo = useUserStore().userInfo;
		setTimeout(()=>{
			insertOperateLog(id,defaultPrinter.value.printerName)
			webviewSrc.value = `${url}iframePrintCombine?id=${id}&printer=${defaultPrinter.value.printerName}&printername=${loginWorkInfo.userName}`
			console.log("webviewSrc.value", webviewSrc.value)
		},1000)
		// insertOperateLog(id,defaultPrinter.value.printerName)
		// webviewSrc.value = `${url}iframePrintCombine?id=${id}&printer=${defaultPrinter.value.printerName}&printername=${loginWorkInfo.value.userName}`
		// showWebView.value = true;
		// setTimeout(() => { // 临时加载耗时，待后期webview通信成功后优化
		// 	showImport.value = false;
		// 	setTimeout(()=>{
		// 		showWebView.value = false;
		// 	},3000)
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: "正在打印中，请稍后...",
		// 	})
		// }, 3000)
	}
	//打印日志信息
	const operateLog = ref({
		logLevel: "INFO",
		applicationName: "jcfk-wms",
		modular: "合包开始",
		businessType: "打印",
		info: "",
	})
	//开始打印
	async function insertOperateLog(id : any, name : any) {
		operateLog.value.info = id + "," + name
		await http({
			method: 'POST',
			url: '/system/sysOperateLog/insert',
			data: operateLog.value
		});
	}
	
	const scannedList = ref([])
	const props = defineProps({
		result: {
			type: String,
		},
	});
	scannedList.value = JSON.parse(props.result)

	function confirmReceiveData() {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	
	
	//打印
	watch(()=>showImport.value,(newValue)=>{
		if (newValue === false) {
			showWebView.value = false;
			webviewSrc.value = url;
			selectOrder.value = {};
		}
	})
	// webview向外部发送消息
	function message(event) {
		console.log("event",event)
		showImport.value = false;
		const data = event.detail.data[0];
		if (data.code === 200) {
			uni.showToast({
				icon: 'none',
				title:data.message,
			})
		} else {
			uni.showToast({
				icon: 'none',
				title:data.message,
			})
		}
		console.log("接收到消息：" + JSON.stringify(event.detail.data));
	}
	
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
	}

	.upload-scan {
		padding: 10px 40rpx 10px 40rpx;
	}

	.area-header {
		color: #909193;
		padding: 10px 15px;
		margin-bottom: 0;
		font-size: 15px;
		background-color: #f3f4f6;
		display: flex;
	}

	.list-content {
		padding: $uni-page-padding;

		.list {
			.card {
				margin-top: 5px;
				margin-bottom: 10px;
				border-radius: 7px;
				display: flex;
				align-items: center;
				padding: 10px 0;
				transition: all 300ms ease;
				box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

				.left {
					// flex-basis: 90rpx;
					// padding-right: 10px;
					text-align: right;
					font-size: 13px;

					.enter {
						line-height: 20px;
						margin-bottom: 5px;
					}

					.number {
						font-size: 13px;
						line-height: 18px;
					}

					:deep(.u-icon--right) {
						flex-direction: row-reverse;
					}
				}

				.right {
					flex: 1;
					padding-left: 15px;

					.title {
						font-size: 15px;
						line-height: 20px;
						margin-bottom: 5px;
						font-weight: 700;

						.uni-btn {
							// margin-top: 30px;
							// border-radius: 24px;
							float: right;
							// left: 200px;
						}
					}

					.body {
						font-size: 13px;
						line-height: 18px;

						.span {
							width: 50%;
							// text-align: left;
							display: inline-block;
						}
					}

					.body1 {
						font-size: 13px;
						line-height: 18px;
						padding-top: 2px;

						.span {
							width: 100%;
							// text-align: left;
							display: inline-block;
						}
					}
				}
			}
		}
	}

	.search {
		display: flex;
		flex: 1;

		.custom-style {
			// width: 120px;
			margin: 12px 5px 5px;
			height: 40px;
			border-radius: 8px;

			&:nth-child(1) {
				flex: 1
			}

			&:nth-child(2) {
				flex: 3
			}
		}
	}
</style>